<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BHM@RAMA8</title>

<script type="text/javascript" src="./dygraph-combined.js"></script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-40786629-1', 'bg4systems.com');
  ga('send', 'pageview');

//$MaxITEMGraph=120;
var strDATA;

</script>
<script >
function getsock(){	
	
	var Graph1="";
	var Graph2="";
	var Graph3="";
	var Graph4="";
	var Graph5="";
	var Graph6="";

	var spROW="<br>";
	var spCH=',';
	var iROW,iCH;
	var rowMAX=-1;
	var chMAX=-1;
	if (window.XMLHttpRequest){
		// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	}else{
		// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
			//document.getElementById("dd").innerHTML=xmlhttp.responseText;
			//strDATA=strDATA + xmlhttp.responseText;
			strDATA= xmlhttp.responseText;
			//alert(strDATA.length);
			//alert(strDATA);
			if (strDATA.length >0) {			
				//alert(strDATA);
				var row = strDATA.split(spROW); //split row
				//alert(row.length);  //row count
				//alert(row);
				//alert(String(row[0]));
				//alert(String(row[30]));

				var ch=row[1].split(spCH); //get channel
				//alert(ch.length); // ch = col.length - 2(index,datetime) 
				
				rowMAX = row.length-1; // ลบ ending 1 row
				//-- debug
				//alert(String(rowMAX)); 
				//if(row[rowMAX-1]==""){
				//	alert(" no data ");
				//}else{
				//	alert(row[rowMAX-1]);
				//}
				
				chMAX = ch.length-2; // ลบ CMD,Length,DateTime
			
			//	rowMAX = 3; // ลบ header 1 row 
			//	chMAX =10; // ลบ CMD,Length,DateTime

				//alert("row:"+String(rowMAX) + " col:" + String(chMAX));
				if(rowMAX<=0){
		//			alert("!ไม่พบข้อมูล ROW");
					return 0;
				}
				if(chMAX<=0){
			//		alert("!ไม่พบข้อมูล CH");
					return 0;
				}

				//alert(myDATA.length); //show count Row
				//alert("Start add data");
				strDATA="";
				//------- Header --------------------------------
				Graph1 ="Date,CH1,CH2";
				Graph2 ="Date,CH3,CH4,CH5,CH6";
				Graph3 ="Date,CH7,CH8,CH9,CH10,CH11,CH12";
				Graph4 ="Date,CH3,CH13,CH14";
				Graph5 ="Date,CH15,CH16,CH17,CH18";
				Graph6 ="Date,CH19,CH20,CH21,CH22";
				//---------------------------------------------------
				for(iROW=0;iROW<rowMAX;iROW++){
					strDATA=row[iROW].split(spCH); // split Column


					//---- X Axis -------
					Graph1+='\n'+strDATA[3];
					Graph2+='\n'+strDATA[3];
					Graph3+='\n'+strDATA[3];
					Graph4+='\n'+strDATA[3];
					Graph5+='\n'+strDATA[3];
					Graph6+='\n'+strDATA[3];

					//--------- data ------
					Graph1+= ','+ strDATA[5];
					Graph1+= ','+ strDATA[8];

					Graph2+= ','+ strDATA[9];
					Graph2+= ','+ strDATA[10];
					Graph2+= ','+ strDATA[11];
					Graph2+= ','+ strDATA[12];

					Graph3+= ','+ strDATA[13];
					Graph3+= ','+ strDATA[14];
					Graph3+= ','+ strDATA[15];
					Graph3+= ','+ strDATA[16];
					Graph3+= ','+ strDATA[19];
					Graph3+= ','+ strDATA[20];

					Graph4+= ','+ strDATA[17];
					Graph4+= ','+ strDATA[18];


					Graph5+= ','+ strDATA[21];
					Graph5+= ','+ strDATA[22];
					Graph5+= ','+ strDATA[23];
					Graph5+= ','+ strDATA[24];

					Graph6+= ','+ strDATA[25];
					Graph6+= ','+ strDATA[26];
					Graph6+= ','+ strDATA[27];
					Graph6+= ','+ strDATA[28];
				}
			}else{
				 alert("!การนำเข้าข้อมูลผิดพลาด myDATA");
			 return 0;
			}

		//Graph1 ="item,CH1,CH2\n1,38,95 2,40,100\n3,42,105 4,44,110\n5,46,115\n6,48,120\n7,50,125 8,52,130\n9,54,135\n10,56,140";
		//alert(Graph1);
		//	alert(Graph3);
		//document.write(Graph1);
			//---debug---
		//	alert("*** endif-01 ");
		    g1=new Dygraph(document.getElementById("graphdiv1"),Graph1,
				{title:'Demo 2 CH',
				ylabel: 'Temperature (F)',
				legend: 'always',
				labelsDivStyles: { 'textAlign': 'right' }, valueRange: [0, 3000]	}	
			);
			
			g2=new Dygraph(document.getElementById("graphdiv2"),Graph2,
				{title:'Demo 4CH',
				ylabel: 'Temperature (F)',
				legend: 'always',
				labelsDivStyles: { 'textAlign': 'right' }, valueRange: [0, 3000]	}	
			);
			g3=new Dygraph(document.getElementById("graphdiv3"),Graph3,
				{title:'Demo 6CH',
				ylabel: 'Temperature (F)',
				legend: 'always',
				labelsDivStyles: { 'textAlign': 'right' }, valueRange: [0, 3000]	}	
			);
			g4=new Dygraph(document.getElementById("graphdiv4"),Graph4,
				{title:'Demo 2CH',
				ylabel: 'Temperature (F)',
				legend: 'always',
				labelsDivStyles: { 'textAlign': 'right' }, valueRange: [0, 3000]	}	
			);
			g5=new Dygraph(document.getElementById("graphdiv5"),Graph5,
				{title:'Demo 4CH',
				ylabel: 'Temperature (F)',
				legend: 'always',
				labelsDivStyles: { 'textAlign': 'right' }, valueRange: [0, 3000]	}	
			);
			g6=new Dygraph(document.getElementById("graphdiv6"),Graph6,
				{title:'Demo 4CH',
				ylabel: 'Temperature (F)',
				legend: 'always',
				labelsDivStyles: { 'textAlign': 'right' }, valueRange: [0, 3000]	}	
			);
		return 0;
		}   
	}
	xmlhttp.open("GET","getdata.php",true);
	xmlhttp.send();
	
}
</script>

</head>



<body>

<p>Display - &gt; Realtime  V 0.0.2</p>
<p align="center"><a href="mainmenu.php">Back</a></p>
<table width="809" border="0">
  <tr>
    <td>Select a set of responses for monitoring </td>
    <td>Time Unit</td>
    <td>Response</td>
  </tr>
  <tr>
    <td width="436"><select name="set_responses" id="set_responses">
      <option selected="selected">Temp and Displacement</option>
      <option>...</option>
      <option>...</option>
      <option>...</option>
    </select></td>
    <td width="173"><select name="within" id="within">
      <option selected="selected">1 Min</option>
      <option>1 Hour</option>
</select></td>
    <td width="200"><select name="response" id="response">
      <option selected="selected">Value</option>
      <option>Level</option>
    </select></td>
  </tr>
</table>
<!--   Real-Time   -->
<script >
	var myVar=setInterval(function(){getsock()},1000);
  </script>
<table width="100" border="0">
  <tr>
    <td>**************** Graph1 *********************
<div id="graphdiv1" style="width: 600px; height: 200px;"></div></td>
    <td>**************** Graph2 *********************
<div id="graphdiv2" style="width: 600px; height: 200px;"></div></td>
  </tr>
  <tr>
    <td>**************** Graph3 *********************
<div id="graphdiv3" style="width: 600px; height: 200px;"></div></td>
    <td>**************** Graph4 *********************
<div id="graphdiv4" style="width: 600px; height: 200px;"></div></td>
  </tr>
  <tr>
    <td>**************** Graph5 *********************
<div id="graphdiv5" style="width: 600px; height: 200px;"></div></td>
    <td>**************** Graph6 *********************
<div id="graphdiv6" style="width: 600px; height: 200px;"></div></td>
  </tr>
</table>

 <div id="div_g" style="width:600px; height:300px;"></div>



</body>
</html>
